<template>
    <div>
      <div style="margin-left: 10px">
        <h3 style="margin-left: 120px">化验检查</h3>
        <el-form :inline="true" :model="outpatients" class="demo-form-inline">
          <el-form-item>
            <el-input style="width: 300px" prefix-icon="el-icon-search" placeholder="请输入就诊卡号" v-model="mid"></el-input>
          </el-form-item>
<!--          <el-select v-model="payStatus" placeholder="请选择">
            <el-option
                v-for="item in value1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>-->
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>

          <el-table
              ref="singleTable"
              :data="outpatients"
              highlight-current-row
              @current-change="handleCurrentChange"
              style="width: 100%"
              height="300">
            <el-table-column
                prop="mid"
                label="卡号"
                width="150">
            </el-table-column>
            <el-table-column
                prop="tid"
                label="化验号"
                width="150">
            </el-table-column>
            <el-table-column
                prop="medicalCard.name"
                label="患者"
                width="150">
            </el-table-column>
            <el-table-column
                prop="medicalCard.sex"
                label="性别"
                width="150">
            </el-table-column>
            <el-table-column
                prop="test.name"
                label="化验项目"
                width="150">
            </el-table-column>
            <el-table-column
                prop="test.price"
                label="费用"
                width="150">
            </el-table-column>
            <el-table-column
                prop="patientTest.createTime"
                label="开单时间"
                width="200">
            </el-table-column>
            <el-table-column prop="patientTest.payStatus" label="缴费状态" width="150" >
              <template #default="scope">
                <el-tag v-if="scope.row.patientTest.payStatus" type="success">已缴费</el-tag>
                <el-tag v-else type="danger">未缴费</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="patientTest.status" label="化验状态" width="150" >
              <template #default="scope">
                <el-tag v-if="scope.row.patientTest.status" type="success">已化验</el-tag>
                <el-tag v-else type="danger">未化验</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
      <el-descriptions title="化验患者信息">
        <el-descriptions-item label="姓名">{{ this.mes.name }}</el-descriptions-item>
        <el-descriptions-item label="化验项目">{{ this.mes.testName }}</el-descriptions-item>
        <el-descriptions-item label="化验号">{{ this.mes.id }}</el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small">化验患者</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <el-form>
        <h3>化验结果:</h3>
          <el-input v-model="patientTest.result" autocomplete="off" type="textarea" size="200px"></el-input>
        <el-upload
            class="upload-demo"
            ref="upload"
            action="/files/testsImage/upload"
            :limit="5"
            list-type="picture"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 0px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
<!--        <div class="demo-image__lazy">
          <el-image v-for="url in testImage" :key="url" :src="url" lazy></el-image>
        </div>-->
        <el-form-item>
          <el-button type="primary" @click="toUpdate" style="margin-top: 10px">完成化验</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
import {Message} from "element-ui";

export default {
  name: "Test",
  data(){
    return{
      mid:'',
      formLabelWidth:'120px',
      payStatus:'',
      value1:[
        {
          label:'未收费',
          value:false
        },
        {
          label:'已收费',
          value:true
        }
      ],
      outpatients:[
        {
          mid:'',
          tid:'',
          patientTest:'',
          test:'',
          medicalCard:''
        }
      ],
      patientTest:{
        id:'',
        createTime:'',
        payStatus:'',
        status:'',
        revPrice:'',
        backPrice:''

      },
      test:{
        name:'',
        price:''
      },
      medicalCard:{
        name:'',
        sex:''
      },
      currentRow:null,
      mes:{
        name:'',
        id:'',
        testName:''
      },
      testImage:[]
    }
  },
  methods:{

    //根据卡号查询化验收费信息
    onSubmit(){
      this.getRequest("/test/getTestMesByMid?mid="+this.mid).then(resp=>{
        if(resp){
          this.outpatients=resp;

        }
      })
    },
    //点击获取表中信息
    handleCurrentChange(val){
      this.currentRow = val;
      console.log(this.currentRow)
      this.patientTest=this.currentRow.patientTest;
      console.log(this.patientTest)
      this.patientTest.id=this.currentRow.tid;
      this.mes.id=this.currentRow.tid;
      this.mes.name=this.currentRow.medicalCard.name;
      this.mes.testName=this.currentRow.test.name;
    },
    //完成化验
    toUpdate(){
      this.$confirm('此操作将完成化验, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.putRequest("/test/updateTestResult",this.patientTest).then(resp=>{
          if(resp){
            this.onSubmit();
            this.addTestImage();
            this.mes='';
            this.patientTest='';
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消完成化验'
        });
      });
    },
    //添加文件上传成功回调
    handleSuccess(res){

      this.testImage.push(res.obj);
      Message.success({message:res.message});
    },
    //添加上传文件
    submitUpload(){

      this.$refs.upload.submit();
    },
    //文件移除的钩子
    handleRemove(file, fileList) {
      console.log(file)
      console.log(file.response.obj);
      for(var i=0;i<this.testImage.length;i++){
        if(this.testImage[i]=file.response.obj){
          this.testImage.splice(i,1);
        }
      }
      console.log(this.testImage)
    },

    addTestImage(){
      this.getRequest('/test/addUrls?urls='+this.testImage+'&&tid='+this.mes.id).then(resp=>{
        if(resp){

        }
      })
    }



  }
}
</script>

<style scoped>

</style>